<nz-card class="list_card" [nzTitle]="cardTitle" [nzExtra]="extraTemplate">
    <!-- <div>
        <form nz-form class="ant-advanced-search-form">
            <div nz-row [nzGutter]="24">
                <div nz-col [nzSpan]="12">
                    <nz-form-item>
                        <nz-form-control>
                            <nz-range-picker name="range" [(ngModel)]="dateRange"></nz-range-picker>
                        </nz-form-control>
                    </nz-form-item>
                </div>
                <div nz-col [nzSpan]="12">
                    <nz-form-item>
                        <nz-form-control>
                            <nz-input-group nzSearch [nzSuffix]="suffixIconButton">
                                <input type="text" nz-input placeholder="名称、业务名称" name="filterText" [(ngModel)]="model.filterText">
                            </nz-input-group>
                            <ng-template #suffixIconButton>
                                <button nz-button nzType="primary" nzSearch (click)="searchData()"><i nz-icon type="search"></i></button>
                            </ng-template>
                        </nz-form-control>
                    </nz-form-item>
                </div>
            </div>
        </form>
    </div> -->
    <nz-table #roleTable [nzFrontPagination]="false" [nzData]="tableHelper.records" [nzTotal]="tableHelper.totalRecordsCount"
        [(nzPageIndex)]="tableHelper.pageIndex" [(nzPageSize)]="tableHelper.defaultPageSize" [nzLoading]="tableHelper.isLoading"
        nzNoResult="暂无数据" (nzPageIndexChange)="searchData()" (nzPageSizeChange)="searchData(true)">
        <thead (nzSortChange)="sort($event)">
            <tr>
                <th nzShowSort nzSortKey="displayName">名称</th>
                <th nzShowSort nzSortKey="creationTime">创建时间</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <ng-template ngFor let-data [ngForOf]="roleTable.data">
                <tr>
                    <td>
                        {{data.displayName}}
                        <nz-tag *ngIf="data.isStatic" [nzColor]="'#108ee9'" nz-tooltip nzTitle="不能删除系统角色">系统</nz-tag>
                        <nz-tag *ngIf="data.isDefault" [nzColor]="'#2db7f5'" nz-tooltip nzTitle="新用户讲默认为此角色">默认</nz-tag>
                    </td>
                    <td>{{data.creationTime ? (data.creationTime | date:'yyyy-MM-dd') : '-'}}</td>
                    <td class="table_operate">
                        <a (click)="editBuildingPlan(data.id)"><i nz-icon [type]="'edit'" theme="fill"></i> 编辑</a>
                        <a *ngIf="!data.isStatic && isGranted('Pages.Administration.Roles.Delete')" nz-popconfirm
                            nzTitle="是否确定删除此项？" nzOkText="确定" nzCancelText="取消" (nzOnConfirm)="deleteConfirm(data.id)"
                            nzPlacement="topRight"><i nz-icon [type]="'delete'" theme="fill"></i> 删除</a>
                    </td>
                </tr>
            </ng-template>
        </tbody>
    </nz-table>
</nz-card>

<ng-template #cardTitle>
    <div class="card_title">
        <i style="margin-right: 10px" nz-icon [type]="'role'" theme="fill"></i> 角色管理
    </div>
</ng-template>

<ng-template #extraTemplate>
    <div class="tab_operate">
        <a (click)="createBuildingPlan()">创建</a>
    </div>
</ng-template>